<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0">
	
<title>产品分类</title>

<link href="static/Theme/css/base.css" rel="stylesheet">
<link href="static/Theme/css/shop.css" rel="stylesheet">
</head>

<body>
<header class="header">
	<div class="header-return">
	    <a href="javascript:history.go(-1);"></a>
	</div>
	
	<div class="logo">分类</div>
</header>

<section class="container">
	<div class="classify">
		<ul>
			<li class="active">
				<span>女装</span>
			</li>

			<li class="">
				<span>美妆洗护</span>
			</li>

			<li class="">
				<span>家纺</span>
			</li>

			<li class="">
				<span>电器</span>
			</li>

			<li class="">
				<span>食品</span>
			</li>

			<li class="">
				<span>内衣</span>
			</li>

			<li class="">
				<span>数码</span>
			</li>        
		</ul>
	</div>
		
	<div class="classify-wrap">
		<div id="classify_1" class="classify-item">
			<div class="classify-title">
				<h3>女装</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/img/classify1.jpg">
						</div>
						<p>新品</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/img/classify2.jpg">
						</div>
						<p>连衣裙</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/img/classify3.jpg">
						</div>
						<p>衬衫</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/img/classify4.jpg">
						</div>
						<p>裤装</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/img/classify5.jpg">
						</div>
						<p>卫衣</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>春上新</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>箱包</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div id="classify_2" class="classify-item">
			<div class="classify-title">
				<h3>美妆洗护</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>女士护肤</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>彩妆</p>
					</a>
				</li>
				
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>面膜</p>
					</a>
				</li>
				
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>男士护肤</p>
					</a>
				</li>
				
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>护发洗浴</p>
					</a>
				</li>
				
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>其他</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div id="classify_3" class="classify-item">
			<div class="classify-title">
				<h3>家纺</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>春上新</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>箱包</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div id="classify_4" class="classify-item">
			<div class="classify-title">
				<h3>电器</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>春上新</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>箱包</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div id="classify_5" class="classify-item">
			<div class="classify-title">
				<h3>食品</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>春上新</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>箱包</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div id="classify_6" class="classify-item">
			<div class="classify-title">
				<h3>内衣</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>春上新</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>箱包</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div id="classify_7" class="classify-item">
			<div class="classify-title">
				<h3>数码</h3>
				
				<a href="">查看更多&gt;</a>
			</div>
			
			<ul>
				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>春上新</p>
					</a>
				</li>

				<li>
					<a href="ShopIndex.html">
						<div class="classify-img">
							<img src="static/Theme/images/no_image.jpg">
						</div>
						<p>箱包</p>
					</a>
				</li>
			</ul>
		</div>
	</div>
</section>

<script src="static/Theme/js/jquery-1.11.2.min.js"></script>
<script>
    $(function(){
		
		//分类滚动效果
		$('.classify li').click(function (e) {
			var i = $(this).index();
			var t = $('.classify-wrap').scrollTop();

			$('.classify li').eq(i).addClass('active').siblings().removeClass('active');
			$('.classify-wrap').scrollTop($('.classify-wrap .classify-item').eq(i).offset().top + t);
		})
		//左边联动

		var heightArr = [];
		for (var i = 0; i < $('.classify-wrap .classify-item').length; i++) {
			heightArr.push($('.classify-wrap .classify-item').eq(i).offset().top);
		}
		// 元素相对窗口顶部偏移量存成数组


		$('.classify-wrap').scroll(function () {
			var t = $(this).scrollTop();

			for (var i in heightArr) {
				if ((t + $('.search').height() + 50) >= heightArr[i]){
				   $('.classify li').eq(i).addClass('active').siblings().removeClass('active');
				}
			}

			$('.classify').stop().animate({
				scrollTop: $('.classify li').height() * ($('.classify li.active').index()+0.5) - ($('.classify').height()/2)
			}, 200)
			// 左侧按钮位置垂直居中
		})
		//右边联动
	});
</script>
</body>
</html>
